<template>
	<view class="wrap">
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="operation">
					<view class="default">
						<view @click="setDetfault(item)" v-if="item.stype == 1" class="status">
							<view class="cricle-success">
								<u-icon name="checkbox-mark" color="#fff"></u-icon>
							</view>
							<view class="text">取消默认</view>
						</view>
						<view @click="setDetfault(item)" v-else class="status">
							<view class="cricle-fail">
								<u-icon name="checkbox-mark" color="#fff"></u-icon>
							</view>
							<view class="text">设为默认</view>
						</view>
					</view>
					<view class="other">
						<view class="edit" @click="addAddr(item)">
							<image style="width: 36rpx; height: 36rpx" mode="widthFix" src="/static/userCenter/edit.png"></image>
						</view>
						<view class="del" @click="delAddr(item)">
							<!-- <u-icon name="trash" color="#999" size="20"></u-icon> -->
							<image style="width: 36rpx; height: 36rpx" mode="widthFix" src="/static/userCenter/del.png"></image>
						</view>
					</view>
				</view>
				<view class="baseInfo">
					<view class="nickName">{{ item.sname }}</view>
					<view class="phone">{{ item.telphone }}</view>
				</view>
				<view class="addr">{{ item.province_name }}{{ item.city_name }}{{ item.area_name }}{{ item.address }}</view>
				<!-- <view class="border-f7f7f7"></view> -->
			</view>
		</view>
		<view class="add">
			<u-button text="新增地址" type="success" color="#21B579" shape="circle" @click="addAddr()"></u-button>
		</view>
		<u-modal :show="delShow" title="地址管理" @confirm="confirmDel" @cancel="delShow = false" showCancelButton>
			<view class="slot-content">
				<view style="color: #999">是否删除该地址?</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			setShow: false,
			delShow: false,
			value: '1',
			userInfo: {},
			isDefault: '0',
			list: [],
			id: ''
		};
	},
	onLoad() {
		this.getUserAddressList();
	},
	methods: {
		getUserAddressList() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					console.log(res);
					that.userInfo = res.data;
					that.$api.post('/fit/addressList', { phone: res.data.phone }).then((res) => {
						if (res.retCode === '0000') {
							that.list = res.data;
						}
					});
				}
			});
		},
		addAddr(data) {
			console.log(data);
			let obj = { ...data, phone: this.userInfo.phone };
			let addrObj = null;
			if (obj) {
				addrObj = JSON.stringify(obj);
			}
			const url = obj ? `../addAddr/addAddr?addrObj=${addrObj}` : '../addAddr/addAddr';
			uni.navigateTo({
				url: url
			});
		},
		delAddr(item) {
			this.delShow = true;
			this.id = item.id;
		},
		confirmDel() {
			this.$api.post('/fit/deleteAddr', { addrId: this.id, phone: this.userInfo.phone }).then((res) => {
				if (res.retCode === '0000') {
					this.getUserAddressList();
					this.delShow = false;
				}
			});
		},
		setDetfault(item) {
			uni.showToast({
				title:'请编辑地址',
				icon:"none"
			})
			// console.log(item)
			// const params = {
			// 	stype: item.stype===1?0:1,
			// 	addrId: item.id,
			// 	province: item.province,
			// 	city: item.city,
			// 	cityName: item.city_name,
			// 	sarea: item.sarea,
			// 	sareaName: item.area_name,
			// 	sname: item.sname,
			// 	address: item.address,
			// 	telphone: item.telphone,
			// 	isDefault:  item.stype===1?0:1,
			// 	phone: item.telphone,
			// 	street:  item.street
			// };
			// this.$api.post('/fit/updateAddr', params).then((res) => {
			// 	console.log(res)
			// 	if (res.recCode === '0000') {
			// 		this.getUserAddressList();
			// 	}
			// });
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	background-color: #f7f7f8;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 100rpx;
	.list {
		margin-top: 30rpx;
		.item {
			padding: 20rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			.baseInfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333;
				margin-top: 24rpx;
				.nickName {
				}
			}
			.addr {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
			.border-f7f7f7 {
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				border-bottom: 1px #f7f7f7 solid;
			}
			.operation {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.default {
					color: #999;
					.status {
						display: flex;
						align-items: center;
						.cricle-success,
						.cricle-fail {
							width: 36rpx;
							height: 36rpx;
							border-radius: 36rpx;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.cricle-success {
							background: #21b579;
						}
						.cricle-fail {
							background: #999;
						}
						.text {
							margin-left: 10rpx;
						}
					}
				}
				.other {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					.del {
						margin-left: 10rpx;
					}
					.edit,
					.del {
						display: flex;
						color: #999;
					}
				}
			}
		}
	}
	.add {
		position: fixed;
		bottom: 0rpx;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		left: 0;
		right: 0;
		background-color: #f7f7f8;
	}
}
</style>
